﻿<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>个人中心</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../assets/img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/bootstrap.min.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="../../assets/css/vendor/font-awesome.min.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="../../assets/css/plugins/slick.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="../../assets/css/plugins/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="../../assets/css/plugins/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="../../assets/css/plugins/jqueryui.min.css">
    <!-- main style css -->
    <link rel="stylesheet" href="../../assets/css/style.css">

    <script src="../../assets/js/plugins/utils.js"></script>

    <script src="../../assets/js/plugins/province.js"></script>

    <script src="../../assets/js/vendor/axios.min.js"></script>

    <script src="../../assets/js/vendor/vue.min.js"></script>

</head>

<body onload="getProvince()">
<!-- Start Header Area -->
<header class="header-area" id="header"></header>
<!-- end Header Area -->




<main>
    <!-- breadcrumb area start -->
    <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="../../assets/img/banner/shop.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h3 class="breadcrumb-title">我的账户</h3>
                            <ul class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="../index.html"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item active" aria-current="page">我的账户</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end -->

    <!-- my account wrapper start -->
    <div class="my-account-wrapper section-padding">
        <div class="container">
            <div class="section-bg-color">
                <div class="row">
                    <div class="col-lg-12">
                        <!-- My Account Page Start -->
                        <div class="myaccount-page-wrapper" id="userInfo">
                            <!-- My Account Tab Menu Start -->
                            <div class="row">
                                <div class="col-lg-3 col-md-4">
                                    <div class="myaccount-tab-menu nav" role="tablist">
                                        <a href="#dashboad" class="active" data-toggle="tab"><i
                                                class="fa fa-dashboard"></i>
                                            个人仪表板</a>
                                        <a href="#orders" data-toggle="tab"><i class="fa fa-cart-arrow-down"></i>
                                            用户订单</a>
                                        <a href="#address-edit" data-toggle="tab"><i class="fa fa-map-marker"></i>
                                            用户地址</a>
                                        <a href="#account-info" data-toggle="tab"><i class="fa fa-user"></i> 用户信息</a>
                                        <a href="javascript:void(0);" @click="Logout"><i class="fa fa-sign-out"></i>用户退出</a>
                                    </div>
                                </div>
                                <!-- My Account Tab Menu End -->

                                <!-- My Account Tab Content Start -->
                                <div class="col-lg-9 col-md-8">
                                    <div class="tab-content" id="myaccountContent">
                                        <!-- Single Tab Content Start -->
                                        <div class="tab-pane fade show active" id="dashboad" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>个人仪表板</h5>
                                                <div class="welcome">
                                                    <p>欢迎你！, <strong>{{nickname}}</strong>
                                                </div>
                                                <p class="mb-0">
                                                    从你的帐户仪表板。你可以很容易地检查和查看您最近的订单，管理您的发货和帐单地址并编辑您的密码和帐户详细信息。</p>
                                            </div>
                                        </div>
                                        <!-- Single Tab Content End -->

                                        <!-- Single Tab Content Start -->
                                        <div class="tab-pane fade" id="orders" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>订单列表</h5>
                                                <div class="myaccount-table table-responsive text-center">
                                                    <table class="table table-bordered">
                                                        <thead class="thead-light">
                                                        <tr>
                                                            <th>订单ID</th>
                                                            <th>日期</th>
                                                            <th>状态</th>
                                                            <th>合计</th>
                                                            <th>Action</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr v-for="(order,index) in userInfo.order"  v-if="userInfo.order!=1">
                                                            <td>{{order.sid}}</td>
                                                            <td>{{order.time}}</td>
                                                            <td>{{order.status}}</td>
                                                            <td>{{order.new_price}}</td>
                                                            <td><a :href="'/view/user/order.html?id='+order.sid"
                                                                   class="btn btn-sqr">View</a>
                                                            </td>
                                                        </tr>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Single Tab Content End -->


                                        <!-- Single Tab Content Start -->
                                        <div class="tab-pane fade" id="address-edit" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>收货地址</h5>
                                                <address v-if="userInfo.addresses != 1 "
                                                         v-for="address in userInfo.addresses">
                                                    <p><strong>{{address.consignee}} {{address.phone}}
                                                        {{address.province}}{{address.city}}{{address.area}}{{address.street}}
                                                        &nbsp;</strong><a href="javascript:void(0)" data-toggle="modal"
                                                                          data-target="#edit_address"
                                                                          @click="getAddress(address.id)"><i
                                                            class="fa fa-edit"></i></a>
                                                        <button type="button" class="close" @click="delAddress(address.id)">&times;</button>
                                                    </p>
                                                </address>
                                                <button class="news-btn" id="mc-submit" data-toggle="modal"
                                                        data-target="#edit_address">新增地址
                                                </button>
                                            </div>
                                        </div>
                                        <!-- Single Tab Content End -->

                                        <!-- Single Tab Content Start -->
                                        <div class="tab-pane fade" id="account-info">
                                            <div class="myaccount-content">
                                                <h5>用户详情</h5>
                                                <div class="account-details-form">
                                                    <template>
                                                        <div class="single-input-item">
                                                            <label for="nickname" class="required">昵称</label>
                                                            <input type="text" v-model="nickname" id="nickname"
                                                                   placeholder="新的昵称"/>
                                                        </div>
                                                        <div class="single-input-item">
                                                            <label for="file" class="required">头像上传</label>
                                                            <input type="file" id="file" ref="file" accept=".png,.jpg"/>
                                                        </div>
                                                        <div class="single-input-item">
                                                            <button class="btn btn-sqr" @click="saveInfo">保存信息</button>
                                                        </div>
                                                    </template>
                                                    <fieldset>
                                                        <legend>修改密码</legend>
                                                        <div class="single-input-item">
                                                            <label for="current-pwd" class="required">当前密码</label>
                                                            <input type="password" id="current-pwd" placeholder="当前密码"/>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                                <div class="single-input-item">
                                                                    <label for="new-pwd" class="required">新的密码</label>
                                                                    <input type="password" id="new-pwd"
                                                                           placeholder="新的密码"/>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="single-input-item">
                                                                    <label for="confirm-pwd"
                                                                           class="required">重复密码</label>
                                                                    <input type="password" id="confirm-pwd"
                                                                           placeholder="重复密码"/>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                    <div class="single-input-item">
                                                        <button class="btn btn-sqr" @click="savePassword">保存信息</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> <!-- Single Tab Content End -->
                                    </div>
                                </div> <!-- My Account Tab Content End -->
                            </div>
                        </div> <!-- My Account Page End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- my account wrapper end -->
</main>

<!-- Scroll to top start -->
<div class="scroll-top not-visible">
    <i class="fa fa-angle-up"></i>
</div>
<!-- Scroll to Top End -->
<!-- Quick view modal start -->
<div class="modal" id="edit_address">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" @click="refresh()">&times;</button>
            </div>
            <div class="modal-body">
                <!-- product details inner end -->
                <div>
                    <div class="row">
                        <div class="col-lg-4"></div>
                        <div class="col-lg-7">
                            <div class="product-details-des">
                                <h3 class="product-name">收货地址</h3>
                                <br>
                                <div class="input-group">
                                    <h6 class="option-title">收货人：</h6>
                                    <label>
                                        <input type="text" class="form-control" placeholder="收货人姓名"
                                               aria-describedby="basic-addon1" id="consignee"
                                               :value="address.consignee">
                                    </label>
                                </div>
                                <br>
                                <div class="input-group">
                                    <h6 class="option-title">手机号：</h6>
                                    <label>
                                        <input type="text" class="form-control" placeholder="收货人手机号码"
                                               aria-describedby="basic-addon1" id="phone" :value="address.phone">
                                    </label>
                                </div>
                                <br>
                                <div class="ratings d-flex">
                                    <label for="province"></label><select id="province" onchange="chooseProvince(this)">
                                    <option value="1" v-if="address!=''">{{address.province}}</option>
                                    <option value="1" v-else>请选择省</option>
                                </select>
                                    <label for="city"></label><select id="city" onchange="chooseCity(this)">
                                    <option value="2" v-if="address!=''">{{address.city}}</option>
                                    <option value="2" v-else>请选择市</option>
                                </select>
                                    <label for="area"></label><select id="area">
                                    <option value="3" v-if="address!=''">{{address.area}}</option>
                                    <option value="3" v-else>请选择区</option>
                                </select>
                                </div>
                            </div>
                            <br>
                            <br>
                            <div class="input-group">
                                <h6 class="option-title">详细地址：</h6>
                                <label>
                                    <input type="text" class="form-control" placeholder="详细街道地址"
                                           aria-describedby="basic-addon1" id="street" :value="address.street">
                                </label>
                            </div>
                            <br>
                            <br>
                            <a href="javascript:void(0)" class="btn btn-large hover-color" @click="updateAddress(flag)">提交信息</a>
                        </div>
                    </div>
                </div> <!-- product details inner end -->
            </div>
        </div>
    </div>
</div>

<!-- footer area start -->
<footer class="black-bg" id="footer"></footer>
<!-- footer area end -->


<!-- JS
============================================ -->
<!-- jQuery JS -->
<script src="../../assets/js/vendor/jquery-3.3.1.min.js"></script>

<script src="../../assets/js/user/userInfo.js"></script>
<!-- Modernizer JS -->
<script src="../../assets/js/vendor/modernizr-3.6.0.min.js"></script>

<!-- Popper JS -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="../../assets/js/vendor/bootstrap.min.js"></script>
<!-- slick Slider JS -->
<script src="../../assets/js/plugins/slick.min.js"></script>
<!-- Countdown JS -->
<script src="../../assets/js/plugins/countdown.min.js"></script>
<!-- Nice Select JS -->
<script src="../../assets/js/plugins/nice-select.min.js"></script>
<!-- jquery UI JS -->
<script src="../../assets/js/plugins/jqueryui.min.js"></script>
<!-- Image zoom JS -->
<script src="../../assets/js/plugins/image-zoom.min.js"></script>
<!-- image loaded js -->
<script src="../../assets/js/plugins/imagesloaded.pkgd.min.js"></script>
<!-- masonry  -->
<script src="../../assets/js/plugins/masonry.pkgd.min.js"></script>
<!-- mailchimp active js -->
<script src="../../assets/js/plugins/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="../../assets/js/plugins/ajax-mail.js"></script>
<!-- Main JS -->
<script src="../../assets/js/main.js"></script>
</body>
<script>
    $("#header").load("../common/header.html");
    $("#footer").load("../common/footer.html");
</script>
</html>